<template>
  <div class="container">
    <a-form
        :layout="layout"
        :model="inform"
        v-bind="formItemLayout"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 10 }"
        autocomplete="off">
      <a-form-item style="position: relative;left: 48%">
        <a-avatar :size="64" :src="this.inform.img">
          <template #icon><UserOutlined /></template>
        </a-avatar>
      </a-form-item>
      <a-form-item label="昵称：">
        <a-input v-model:value="inform.name" />
      </a-form-item>
      <a-form-item label="电话：">
        <a-input v-model:value="inform.telephone" />
      </a-form-item>
      <a-form-item label="用户ID：">
        <span>{{inform.id}}</span>
      </a-form-item>
      <a-form-item label="个人简介：">
        <a-textarea v-model:value="inform.personalProfile" placeholder="这个人太懒了，什么都没有写...."/>
      </a-form-item>
      <a-form-item style="position: relative;left: 33.5%">
        <a-button type="primary" @click="submit1('inform')">提交基本信息</a-button>
        &nbsp;&nbsp;
        <a-button type="primary" :size="size" @click="showModal">
          <template #icon>
            <DownloadOutlined />
          </template>
          上传新的头像
        </a-button>

        <a-modal
            v-model:visible="visible"
            title="上传头像"
            ok-text="确认"
            cancel-text="取消"
            @ok="hideModal"
            style="text-align: center"
        >
          <!--            <a-form-->
          <!--                :layout="layout"-->
          <!--                v-bind="formItemLayout"-->
          <!--                :label-col="{ span: 4 }"-->
          <!--                :wrapper-col="{ span: 10 }"-->
          <!--                autocomplete="off">-->
          <!--              <a-form-item label="上传图片">-->
          <el-upload

              v-model="img"
              accept=".png,.jpg,.jpeg,.bmp,.gif"
              :show-file-list="false"
              :multiple="false"
              :on-change="submit2"
              :auto-upload="false">
            <el-button slot="trigger" size="large" type="primary" :loading="loadingBtn">点击此处上传</el-button>
          </el-upload>
          <!--              </a-form-item>-->
          <!--            </a-form>-->
        </a-modal>



      </a-form-item>
    </a-form>
  </div>
</template>


<!--JavaScript-->
<script>
import {defineComponent, reactive, ref, toRaw} from 'vue';
const visible = ref(false);

export default {
  data(){
    return {
      inform:{
        name:'',
        personalProfile:'',
        id:'',
        img:'',
        telephone:'123',
        token:''
      },
      sentinform:{
        nickname:'',
        personalProfile:'',
        telephone:'',
      },
      img:[],
      loadingBtn:false,
      visible,

    }
  },
  created(){
    //页面加载时就从本地通过localstorage获取存储的token值
    this.token =  localStorage.getItem('ID');
    this.id = this.token;
  },
  mounted() {
    this.$http({
      method: 'get',
      url: '/user/info',
      headers: {
        //把token放到请求头才能请求，这里的'Bearer '表示是后台希望更加的安全，依据后台给的信息看到底是加还是不加
        'session':  this.token,
      }
    })
        .then(res=>{                    //请求成功后执行函数
          if(res.data.code === 0){
            //请求成功之后给用户名赋值
            this.inform.name=res.data.data.nickname;
            this.inform.personalProfile = res.data.data.personalProfile;
            this.inform.id=res.data.data.id;
            this.inform.telephone = res.data.data.telephone;
            this.inform.img = ref(res.data.data.portrait);
            console.log("登录成功")
          }else{
            console.log("登录失败")
          }
        })
        .catch(err=>{                   //请求错误后执行函
          console.log("请求错误")
        })
  },
  methods:{
    submit1(FormName){
      this.sentinform.nickname= this.inform.name
      this.sentinform.personalProfile=this.inform.personalProfile
      this.sentinform.telephone=this.inform.telephone
      this.$http({
        method: 'post',
        url: '/user/update',
        data:this.sentinform,
        headers: {
          //把token放到请求头才能请求，这里的'Bearer '表示是后台希望更加的安全，依据后台给的信息看到底是加还是不加
          'session':  this.token,
        }
      })
          .then(res=>{                    //请求成功后执行函数
            if(res.data.code === 0){
              //请求成功之后给用户名赋值
              this.$message.success('修改成功')
              console.log("登录成功")
              this.$router.go("/");
            }else{
              this.$message.error('修改失败')
              console.log("登录失败")
            }
          })
          .catch(err=>{                   //请求错误后执行函
            console.log("请求错误")
          })
    },
    showModal(){
      visible.value = true;
    },
    hideModal(){
      visible.value = false;
    },
    submit2(file,img){
      if(img.length>0){
        this.img = [img[img.length-1]];
        this.loadingBtn=true;
        let formData = new FormData();
        formData.append("file",this.img[0].raw);
        const file = this.img[0].raw;
        const isJPG =
            file.type === 'image/jpeg' ||
            file.type==='image/jpg'||
            file.type === 'image/png' ||
            file.type === 'image/bmp' ||
            file.type === 'image/gif';
        if(!isJPG){
          this.$message.error('上传的文件必须是图片(.png,.jpg,.jpeg,.bmp,.gif)');
          return false
        }
        this.$http({
          method:'post',
          url:'/user/upload',
          data:formData,
          headers:{
            // 'Content-Type':'multipart/form-data',
            'session':this.token,
          }
        })


            .then(res=>{                    //请求成功后执行函数
              if(res.data.code === 0){
                //请求成功之后给用户名赋值
                this.$message.success('上传成功')
                console.log("上传成功")
                this.$router.go("/");
              }else{
                this.$message.error('上传失败')
                console.log("上传失败")
              }
            })
            .catch(err=>{                   //请求错误后执行函
              console.log("请求错误")
            })
      }
    },
  },
}
</script>
<!--css-->
<style scoped>
.info {
  text-align: center;
  padding: 35px 0;
}
.info-image {
  position: relative;
  margin: auto;
  width: 100px;
  height: 100px;
  background: #f8f8f8;
  border: 1px solid #eee;
  border-radius: 50px;
  overflow: hidden;
}
.info-edit {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.info-edit i {
  color: #eee;
  font-size: 25px;
}
.info-image:hover .info-edit {
  opacity: 1;
}
.info-name {
  margin: 15px 0 10px;
  font-size: 24px;
  font-weight: 500;
  color: #262626;
}
.crop-demo-btn {
  position: relative;
}
.crop-input {
  position: absolute;
  width: 100px;
  height: 40px;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}
</style>